{% extends "front/base.html" %}

{% block content %}
<!-- 页面标题 -->
<section class="page-header bg-light py-5">
    <div class="container">
        <h1 class="text-center mb-0">{{ '關於我們' | t }}</h1>
        <p class="lead text-center mt-3 text-muted">{{ '了解更多關於日創科技的故事' | t }}</p>
    </div>
</section>

<!-- 公司简介 -->
<section class="about-section section-padding">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h2 class="mb-4">{{ '公司簡介' | t }}</h2>
                <p class="lead mb-4">{{ '日創科技是一家專注於提供專業技術服務的公司。我們致力於為客戶提供最優質的解決方案，幫助企業實現數字化轉型。' | t }}</p>
                <p>{{ '我們的團隊擁有豐富的行業經驗，能夠為客戶提供全方位的技術支持和服務。' | t }}</p>
            </div>
            <div class="col-lg-6">
                <img src="{{ url_for('static', filename='images/about/company.jpg') }}" 
                     alt="公司照片" class="img-fluid rounded shadow">
            </div>
        </div>
    </div>
</section>

<!-- 我们的使命 -->
<section class="mission-section section-padding bg-light">
    <div class="container">
        <h2 class="text-center mb-5">{{ '我們的使命' | t }}</h2>
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="mission-card text-center">
                    <i class="fas fa-rocket fa-3x text-primary mb-3"></i>
                    <h4>{{ '創新科技' | t }}</h4>
                    <p>{{ '不斷創新，引領行業發展' | t }}</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="mission-card text-center">
                    <i class="fas fa-handshake fa-3x text-primary mb-3"></i>
                    <h4>{{ '優質服務' | t }}</h4>
                    <p>{{ '以客戶為中心，提供最優質的服務' | t }}</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="mission-card text-center">
                    <i class="fas fa-users fa-3x text-primary mb-3"></i>
                    <h4>{{ '團隊協作' | t }}</h4>
                    <p>{{ '團結協作，共創價值' | t }}</p>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %} 